import { useEffect, useRef } from 'react'
import { Stencil } from '@antv/x6-plugin-stencil'
import { ComSearch } from './com-serach'
import { createImageNodes } from './graph'
import { v4 as uuidv4 } from 'uuid';
import ConfigAdd from '../config-add/index'
import FlowStepTable from '../config-edit-table/flow-step-table'
import { TreeRectNode } from './nodes'

export const FlowStep = ({ graph, openMenu }) => {
  useEffect(() => {
    if (!graph) {
      return
    }

    const stencil = new Stencil({
      title: '流程步',
      target: graph,
      stencilGraphWidth: 260,
      stencilGraphHeight: 140,
      collapsable: true,
      groups: [
        {
          title: '常用',
          collapsed: true,
          name: 'group3',
        },{
          title: '条件',
          collapsed: true,
          name: 'group1',
        },{
          title: '自动判读',
          collapsed: true,
          name: 'group5',
        },{
          title: '激励信号',
          name: 'group2',
          collapsed: true,
          graphHeight: 250,
          layoutOptions: {
            rowHeight: 50,
          },
        },{
          title: '界面刷新',
          collapsed: true,
          name: 'group4',
        },{
          title: '通用项',
          collapsed: true,
          name: 'group6',
        },
      ],
      layoutOptions: {
        columns: 3,
        columnWidth: 80,
        rowHeight: 55,
      },
    })

    document.getElementById('flowStep').appendChild(stencil.container)

    const treeRectNode1 = new TreeRectNode({
      attrs: {
        label: {
          textWrap: {
            text: '树节点1',
          }
        }
      },
      shape: 'tree-rect-node',
    })
    const treeRectNode2 = new TreeRectNode({
      attrs: {
        label: {
          textWrap: {
            text: '树节点2',
          }
        }
      },
      shape: 'tree-rect-node',
    })
    const treeRectNode3 = new TreeRectNode({
      attrs: {
        label: {
          textWrap: {
            text: '树节点3',
          }
        }
      },
      shape: 'tree-rect-node',
    })

    stencil.load([treeRectNode1, treeRectNode2, treeRectNode3], 'group3')

    const r1 = graph.createNode({
      shape: 'custom-rect',
      label: '开始',
      attrs: {
        body: {
          rx: 20,
          ry: 26,
        },
      },
    })

    console.log(r1)

    const r2 = graph.createNode({
      shape: 'custom-rect',
      label: '过程',
    })
    const r3 = graph.createNode({
      shape: 'custom-rect',
      attrs: {
        body: {
          rx: 6,
          ry: 6,
        },
      },
      label: '可选过程',
    })
    const r4 = graph.createNode({
      shape: 'custom-polygon',
      attrs: {
        body: {
          refPoints: '0,10 10,0 20,10 10,20',
        },
      },
      label: '决策',
    })
    const r5 = graph.createNode({
      shape: 'custom-polygon',
      attrs: {
        body: {
          refPoints: '10,0 40,0 30,20 0,20',
        },
      },
      label: '数据',
    })
    const r6 = graph.createNode({
      shape: 'custom-circle',
      label: '连接',
    })
    stencil.load([r1, r2, r3, r4, r5, r6], 'group1')

    const imageShapes = [
      {
        label: '激励信号1',
        image:
          'https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg',
      },
      {
        label: '激励信号2',
        image:
          'https://gw.alipayobjects.com/zos/bmw-prod/dc1ced06-417d-466f-927b-b4a4d3265791.svg',
      },
      {
        label: '激励信号3',
        image:
          'https://gw.alipayobjects.com/zos/bmw-prod/c55d7ae1-8d20-4585-bd8f-ca23653a4489.svg',
      },
      {
        label: '激励信号4',
        image:
          'https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg',
      },
      {
        label: '激励信号5',
        image:
          'https://gw.alipayobjects.com/zos/bmw-prod/c36fe7cb-dc24-4854-aeb5-88d8dc36d52e.svg',
      },
      {
        label: '激励信号6',
        image:
          'https://gw.alipayobjects.com/zos/bmw-prod/2010ac9f-40e7-49d4-8c4a-4fcf2f83033b.svg',
      },
    ]
    const imageShapes1 = [
      {
        label: '判读规则1',
        image:
          'https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg',
      }
    ]
    stencil.load(createImageNodes(graph, imageShapes), 'group2')
    stencil.load(createImageNodes(graph, imageShapes1),'group5')
  }, [graph])

  const onContextMenu = (event) => {
    event.preventDefault()
    openMenu(event)
  }

  const config = { key: '1', name: '流程步', title: '流程步配置', template: '模版名', templates: [ 
    { key: uuidv4(), templateName: '流程步1', list: [] }, 
    { key: uuidv4(), templateName: '流程步2', list: [] }, 
    { key: uuidv4(), templateName: '流程步3', list: [] }, 
  ]}

  const configAddRef = useRef()

  const onOpen = () => {
    configAddRef.current.open()
  }


  return <>
    <div className="com-container">
      <ComSearch onAdd={onOpen} />
      <div className="com-content" onContextMenu={onContextMenu}>
        <div id="flowStep" className="flow-step"></div>
      </div>
    </div>
    <ConfigAdd ref={configAddRef} config={config} showAdd={false} showList={false} tableCom={FlowStepTable}>
    </ConfigAdd>
  </>
}

export default FlowStep
